<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
        
        .box>li {
            width: 30%;
            height: 20vh;
            line-height: 20vh;
            text-align: center;
            border: 1px solid black;
            font-size: 36px;
            margin: 10px;
        }
        
        .active {
            background-color: red;
            color: white;
        }
        
        .action {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">8</li>
        <li class="active action">抽奖</li>
        <li class="item">4</li>
        <li class="item">7</li>
        <li class="item">6</li>
        <li class="item">5</li>
    </ul>

    <script>
        // 1.获取除了抽奖按钮以外的li
        const list = [...document.querySelectorAll(".item")];
        // 2.逻辑函数
        function run(list, index) {
            // 只有符合的才加不符合的删掉类名
            list.forEach((item, i) => {
                if (index === i) {
                    list[index].classList.add("active");
                } else {
                    item.classList.remove("active");
                }
            });
        }
        // 3.遍历顺序的下标数组
        const oder = [0, 1, 2, 4, 7, 6, 5, 3];
        // 4.定时器执行抽奖
        document.querySelector(".action").addEventListener("click", () => {
            // 累计循环的下标
            let count = -1;
            // 最终选中的数字
            const n = Math.floor(Math.random() * 8);
            // 循环的次数
            let c = Math.ceil(Math.random() * 3);
            let time = setInterval(() => {
                count++;
                if (count >= 8) {
                    // 每走一圈，就把圈数累计剪掉一次
                    c--;
                    count = 0;
                }
                run(list, oder[count]);
                if (c < 1 && count >= n) {
                    clearInterval(time);
                }
            }, 200);
        });
    </script>
    <script>
        // fetch的宿主是window
        // 第一个参数是请求地址，第二个参数是一个配置对象，该对象里可以设置请求方式以及传递参数和设置请求头等
        // 基于promise语法可以使用then和catch
        // 第一个then必须格式化数据
        // 第二个then获取格式化后的数据
        fetch('./1.json', {
            method: 'get',
            // 第一个then用来格式化数据的，把二进制数据流转成json格式
        }).then(data => data.json()).then(res => {
            console.log(res)

        }).catch(err => {
            console.log(err)
        })
    </script>
</body>

</html>